<template>
  <a-tooltip :title="title">
    <span
      class="inline-block"
      :style="[width ? { width: width + 'px' } : '']"
      :class="[width ? 'overflow-hidden text-ellipsis' : '']"
    >
      <span ref="textEl" class="inline-block" :style="textStyle" :class="textClass">
        {{ isNullOrUndefOrEmpty(innerText) ? "--" : innerText }}
      </span>
    </span>
  </a-tooltip>
</template>
<script setup lang="ts">
import { nextTick, onMounted, ref, shallowRef, StyleValue, watch } from "vue";
import { isNullOrUndefOrEmpty } from "/@/utils/common";

const props = defineProps<{
  width?: number;
  maxLen?: number;
  text?: string;
  textStyle?: StyleValue;
  textClass?: string;
}>();
const textEl = shallowRef<HTMLSpanElement>();
const title = ref("");
const innerText = ref(props.text);
function dealText() {
  if (textEl.value) {
    title.value = "";
    if (props.width) {
      if (textEl.value.offsetWidth >= props.width) {
        title.value = props.text || "";
      }
    } else if (props.maxLen) {
      let text = props.text;
      if (text && text.length > props.maxLen) {
        title.value = text;
        innerText.value = text.substring(0, props.maxLen) + "...";
      }
    }
  }
}
watch(
  () => props.text,
  (v) => {
    innerText.value = v;
    nextTick(() => {
      dealText();
    });
  }
);
onMounted(() => {
  dealText();
});
</script>
